<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时环境监控</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            background-image: url('./beijing.png');
            background-size: cover;  /* 让图片充满整个页面 */
            background-position: center;  /* 图片居中 */
        }

        .container {
            width: 90%;
            margin-top: 50px;
        }

        h1 {
            color: #5e5e5e;
            margin-bottom: 20px;
        }

        nav {
            text-align: center;
            margin-bottom: 30px;
        }

        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #007bff;
            font-size: 18px;
            font-weight: bold;
        }

        nav a:hover {
            color: #0056b3;
        }

        /* 使用Flexbox将视频和图表放置为两个独立模块并排显示 */
        .flex-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 20px;
        }

        /* 视频容器 */
        #video-container {
            width: 48%;
            /* 调整视频显示的宽度 */
            max-width: 600px;
            background-color: #ddd;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        #video {
            width: 100%;
            /* 使视频宽度填满容器 */
            border-radius: 8px;
        }

        /* 图表容器 */
        #chart-container {
            width: 48%;
            /* 设置图表的宽度 */
            max-width: 600px;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            opacity: 0.9;
        }

        #line-chart {
            width: 100%;
            /* 使图表宽度填满容器 */
            height: 400px;
        }
    </style>
    <script type="text/javascript">
        setInterval(function () {
            init();
        }, 2000);
        function init() {
            refresh();
        }
        function refresh() {
            var xhr = new XMLHttpRequest();
            var url = ""; // 请求的URL

            xhr.open("POST", url, true);

            var post_req = {
                "type": 1,
                "limit": "all"
            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = xhr.responseText;
                    var info = JSON.parse(response);
                    console.log(info);
                    for (var i = 0; i < info.data.length; i++) {
                        if (info.data[i].key == 101) {
                            temperature = info.data[i].val;
                        } else if (info.data[i].key == 102) {
                            humidity = info.data[i].val;
                        } else if (info.data[i].key == 106) {
                            brightness = info.data[i].val;
                        }
                    }
                }
            };

            xhr.send(JSON.stringify(post_req));
        }
    </script>
</head>

<body>

    <h1>基于边缘网关的智能医疗监护系统</h1>
    <nav>
        <a href="temp_stm32.html">控制页面</a>
        <a href="temp_modbus.html">数据显示页面</a>
        <a href="1.html">实时环境监控</a>
    </nav>

    <div class="container">
        <!-- Flexbox容器：包含视频监控和图表 -->
        <div class="flex-container">
            <!-- 视频播放控件 -->
            <div id="video-container">
                <img src="http://192.168.50.201:8080/?action=stream" alt="加载视频失败" id="video">
            </div>

            <!-- 实时环境数据图表 -->
            <div id="chart-container">
                <canvas id="line-chart"></canvas>
            </div>
        </div>
    </div>

    <script>
        // 模拟实时环境数据
        const ctx = document.getElementById('line-chart').getContext('2d');
        let chart;
        let timeSeries = [];
        let temperatureData = [];
        let humidityData = [];
        let brightnessData = [];

        // 初始化Chart.js图表
        // 初始化Chart.js图表
        function initChart() {
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: timeSeries,  // 时间轴
                    datasets: [
                        {
                            label: '温度 (°C)',
                            data: temperatureData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            fill: true,
                            tension: 0.3,  // 设置平滑曲线
                        },
                        {
                            label: '湿度 (%)',
                            data: humidityData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            fill: true,
                            tension: 0.3,  // 设置平滑曲线
                        },
                        {
                            label: '亮度 (Lux)',
                            data: brightnessData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            fill: true,
                            tension: 0.3,  // 设置平滑曲线
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: '时间'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: '值'
                            },
                            min: 0
                        }
                    },
                    plugins: {
                        tooltip: {
                            enabled: true, // 启用tooltip
                            mode: 'nearest', // 鼠标靠近最近的点时显示tooltip
                            intersect: false, // 鼠标悬停在点与线之间时显示
                            callbacks: {
                                // 自定义tooltip内容
                                title: function (tooltipItems) {
                                    return '时间: ' + tooltipItems[0].label;
                                },
                                label: function (tooltipItem) {
                                    const datasetLabel = tooltipItem.dataset.label || '';
                                    const value = tooltipItem.raw.toFixed(2);  // 保留两位小数
                                    return datasetLabel + ': ' + value;
                                }
                            }
                        },
                        title: {
                            display: true, // 启用标题
                            text: '实时环境监测', // 设置标题文本
                            font: {
                                size: 20, // 设置字体大小
                                weight: 'bold', // 设置字体加粗
                            },
                            padding: {
                                top: 10,
                                bottom: 20
                            }
                        }
                    }
                }
            });
        }


        // 模拟获取实时数据并更新图表
        function updateChart() {
            const now = new Date();
            const timeLabel = now.toLocaleTimeString();
            // 更新数据
            timeSeries.push(timeLabel);
            temperatureData.push(temperature);
            humidityData.push(humidity);
            brightnessData.push(brightness);
            // 保持时间轴和数据长度一致，防止无限增长
            if (timeSeries.length > 20) {
                timeSeries.shift();
                temperatureData.shift();
                humidityData.shift();
                brightnessData.shift();
            }
            // 更新图表
            chart.update();
        }

        // 每秒钟更新一次图表
        setInterval(updateChart, 2000);

        // 初始化图表
        initChart();
    </script>
</body>

</html>